.table-actions {
  display: inline-flex;
  .btn {
    @extend .btn-embed;
    @extend .hcenter;
  }
}

.table-default-action {
  svg {
    margin-right: 6px;
    width: 0.75em;
    height: 0.75em;
    vertical-align: baseline;
  }
}

.table-selected {
  background-color: $table-bg-active;
  // the following is needed so the row color takes precedence over the
  // column color
  .table-sort-column {
    background-color: $table-bg-active;
  }
}

.table-hover > .xtbody > .xtr:hover {
  .table-sort-column {
    background-color: $table-bg-hover;
  }
}

.table-highlighted {
  background-color: $brand-secondary;
  .table-sort-column {
    background-color: $brand-secondary;
  }
}

.table-filter-column {
  background-color: $brand-info !important;
}

.table-sort-column {
  background-color: darken($table-bg, 5%);
}

.table-header-pane {
  position: absolute;
  top: 0;
  left: 0;
}

.table-main-pane {
  overflow-y: auto;
  flex: 1 1 0%;
  will-change: transform;
}

.table-container.has-details {
  .table-header-pane { 
    right: calc(#{$half-gutter} + #{$scrollbar-width});
  }

  .table-main-pane {
    margin-right: $half-gutter;
  }
}

.table-main-pane,
.table-header-pane {
  .xthead {
    .xth {
      padding: $table-header-border-width 0px $table-header-border-width !important;
      height: 100%;

      &:first-child {
        padding-left: $table-header-border-width !important;
      }

      &:last-child {
        padding-right: $table-header-border-width !important;
      }

      > div {
        height: 100%;
        // min-height: 48px;
        display: flex;
        justify-content: center;
        flex-direction: row;
        padding: 4px 4px;
      }
    }
  }

  .xtbody {
    background-color: $brand-menu;
    .xtr {
      > div {
        padding: 4px 0px;
      }
    }
  }
}

.table-container .table-main-pane .xthead {
  .table-header-cell.xth {
    padding: 0 !important;
    border: 0 !important;
    > * {
      max-height: 0 !important;
      visibility: hidden;
      margin-top: -100%;
    }
  }
}

.table-container .xthead .table-header-cell .cell-controls {
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.table-group-header {
  background-color: darken($table-bg, 5%);
  border-bottom: 1px solid $gray-dark !important;
  border-top: 1em solid $table-bg !important;
  > .icon {
    margin-right: 1em;
  }

  &:hover {
    background-color: $table-bg-active;
  }
}

.table-row-grouped {
  > td:first-child {
    padding-left: 2em !important;
  }
}

.table-details-pane {
  // overflow-y: auto;
  padding: 0px;
  background-color: $brand-menu;
  transition: max-width $transition-time-half;
  border-right-width: 0px;
  position: absolute;
  right: 1px;
  top: 0;
  bottom: 0;

  &.open {
    max-width: 50%;
    border: 1px solid $border-color;
    border-right-width: 0;
    box-shadow: -2px 0px 4px 1px rgba(0, 0, 0, 0.5);
  }
  &.closed {
    // overruled by min-width
    max-width: 0%;
    border: 0px;
    contain: content;
  }

  .form-control-static {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
  }
}

.table-layout {
  margin: 10px;
}

.table-details-outer {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.table-details-inner {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .table-form-details {
    // we can't set overflow-y on the form or it breaks horizontal overflow for some reason
  }

  &.table-details-hovered {
    padding-left: 50vw;
    margin-left: -50vw;

    .Select-menu-outer {
      width: auto;
      min-width: 100%;
      left: unset;
      right: 0;
    }
  }
}

.table-details-select-container {
  display: flex;
  width: 100%;
  align-items: center;
  svg {
    margin-right: 1em;
  }
  .Select {
    flex: 1 1 0;
  }
}

.table-form-details {
  flex: 1 1 0%;
  padding: 5px;
  min-width: 250px;

  .Select-menu-outer {
    white-space: nowrap;
  }
}

.table-header {
  margin-right: $scrollbar-width;
  transform-style: preserve-3d;
}

.table-pinned {
  height: 3em;
  > div, td {
    height: 3em;
    background-color: $brand-info;
    padding: 8px;
    > .btn {
      margin-left: 8px;
    }
  }
}

.table-pinned-hidden {
  display: none;
  > div {
    display: none;
  }
}

.table-footer-placeholder {
  height: 48px;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  background-color: $brand-highlight;
  color: $white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;

  .btn {
    background-color: transparent;
    color: inherit;
    &:hover {
      background-color: rgba(255,255,255, 0.2);
    }
    // this simply restores the settings from ".table-footer .btn" but with a
    // higher specificity
    &:disabled {
      background-color: transparent;
      color: inherit;
    }
  }
}

.btn-table-filter {
  @extend .btn-embed;
  height: 100%;
}

.group-addon-btn {
  padding: 0px 3px;
  width: 26px;

  button {
    padding: 0px;
    width: 100%;
  }
}

.table-container {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  height: 100%;
  position: relative;
}

.table-container-inner {
  display:flex;
  flex-direction: column;
  width: 100%;
}

.textarea-details {
  width: 100%;
  resize: none;
  min-height: 100px;
}

.menu-content ul.dropdown-menu .btn {
  background-color: transparent;
  border: 0px;
  display: flex;
  width: 100%;
}

.dropdown-menu .menu-more-icon {
  position: absolute;
  right: 0;
}

.xtable .cell-actions {
  // display: inline-flex;
  // width: 100%;

  .dropdown .btn:first-child,
  .dropup .btn:first-child {
    text-align: left;
    svg {
      margin-right: 0.5em;
    }
  }
  .dropdown-toggle {
    min-width: initial;
  }
}

.table-group-enabled {
  color: $brand-secondary;
}
